<template>
	<div v-loading="loading">
		<el-form :model="formData"  ref="ruleForm" label-width="8 0px">
			<el-form-item label="" prop="priorityDispatchArea">
				<ul class="card_item">
					<li>
						优先派单范围<br/>
						<span class="cl939398">优先派单范围必须小于等于派单范围</span>
					</li>
					<li>
						<el-input v-model.number="formData.priorityDispatchArea" placeholder="请输入" class="w200 ml100">
							<template slot="append">公里</template>
						</el-input>
					</li>
					<li>
						<span class="cl939398 ml10">(0.1-50公里)</span>
					</li>
				</ul>
			</el-form-item>
			<el-form-item label="" prop="dispatchArea">
				<ul class="card_item">
					<li>
						派单范围<br/>
						<span class="cl939398">范围在"1-50"公里范围内</span>
					</li>
					<li>
						<el-input v-model.number="formData.dispatchArea" placeholder="请输入" class="w200 ml100">
							<template slot="append">公里</template>
						</el-input>
					</li>
					<li>
						<span class="cl939398 ml10">(1-50公里)</span>
					</li>
				</ul>
			</el-form-item>
			<el-form-item label="" prop="ringTime">
				<ul class="card_item">
					<li>
						派单模式<br/>
						<span class="cl939398">司机响单后15秒以内未进行操作，则是为该司机拒单或者忽略，进行下一轮派单</span>
					</li>
					<li>
						<el-input v-model.number="formData.ringTime" placeholder="请输入" class="w200 ml100">
							<template slot="append">秒</template>
						</el-input>
					</li>
					<li>
						<span class="cl939398 ml10">(15-200秒)</span>
					</li>
				</ul>
			</el-form-item>
			<el-form-item label="" prop="dispatchTime">
				<ul class="card_item">
					<li>
						发单时长<br/>
						<span class="cl939398">订单发单超时后,将停止响单,进入订单池</span>
					</li>
					<li>
						<el-input v-model.number="formData.dispatchTime" placeholder="请输入" class="w200 ml100">
							<template slot="append">分钟</template>
						</el-input>
					</li>
					<li>
						<span class="cl939398 ml10">(1-60分钟)</span>
					</li>
				</ul>
			</el-form-item>
			<el-form-item label="" prop="indentPoolArea">
				<ul class="card_item">
					<li>
						订单池抢单范围<br/>
						<span class="cl939398">司机在订单池可抢订单距离</span>
					</li>
					<li>
						<el-input v-model.number="formData.indentPoolArea" placeholder="请输入" class="w200 ml100">
							<template slot="append">公里</template>
						</el-input>
					</li>
					<li>
						<span class="cl939398 ml10">(1-50公里)</span>
					</li>
				</ul>
			</el-form-item>
			<el-form-item label="" prop="indentPoolTime">
				<ul class="card_item">
					<li>
						订单在订单池停留时间<br/>
						<span class="cl939398">订单在订单池中超时后,将被系统取消</span>
					</li>
					<li>
						<el-input v-model.number="formData.indentPoolTime" placeholder="请输入" class="w200 ml100">
							<template slot="append">分钟</template>
						</el-input>
					</li>
					<li>
						<span class="cl939398 ml10">(0.1-50公里)</span>
					</li>
				</ul>
			</el-form-item>
			<el-form-item label="" prop="refundCount">
				<ul class="card_item">
					<li>
						拒绝派单次数<br/>
						<span class="cl939398">司机可以拒绝系统派单次数</span>
					</li>
					<li>
						<el-input v-model.number="formData.refundCount" placeholder="请输入" class="w200 ml100">
							<template slot="append">次</template>
						</el-input>
					</li>
					<li>
						<span class="cl939398 ml10">(默认4次,区间0次-10次)</span>
					</li>
				</ul>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: 'orderSetting',
	data () {
		return {
			loading:false,
			rules: {
				type: [
					{required: true, message: '请选择原因类型', trigger: 'change'},
				],
				reason: [
					{required: true, message: '请输入原因', trigger: 'blur'},
				],
			},
			formData: {
				priorityDispatchArea: null,
				dispatchArea: null,
				ringTime: null,
				dispatchTime: null,
				indentPoolArea: null,
				indentPoolTime: null,
				refundCount: null
			}
		}
	},
	methods:{
		getData(){
			this.loading=true
			this.$http({
				url: this.$http.adornUrl('sys/business/getDispatchConfig'),
				method: 'get',
			}).then(res=>{
				this.loading=false
				this.formData=res.data.data
			})
		},
		onSubmit(){
			this.loading=true
			this.$http({
				url: this.$http.adornUrl('sys/business/saveDispatchConfig'),
				method: 'post',
				data:this.formData
			}).then(res=>{
				this.loading=false
				if(res.data.code==0){
					this.$message({
						message: "更新成功",
						type: 'success',
						duration: 1500
					})
				}else{
					this.$message({
						message: res.msg,
						type: 'success',
						duration: 1500
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.w200{
	width: 200px;
}
.cl939398{
	color: #939398;
}
.ml10{
	margin-left: 10px;
}
.ml100{
	margin-left: 100px;
}
.card_item{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.card_item{
	border:1px solid #ebeef5;
	padding: 20px;
}
</style>
